<template>
  <div id="app">
    <bar-demo1 />
    <charts
            width="600px"
            height="400px"
            :chartExpandAttrs="{
              animationDuration: 0,
              animationDurationUpdate: 3000,
              animationEasing: 'linear',
              animationEasingUpdate: 'linear'
            }"
            @on-render="getEchart"
    >
      <charts-x-axis
              type="value"
              max="dataMax"
      />
      <charts-y-axis
              type="category"
              :data="['A', 'B', 'C', 'D', 'E']"
              :inverse="true"
              :animationDuration="300"
              :animationDurationUpdate="300"
              :max="2"
      />
      <charts-series
              :realtimeSort="true"
              type="bar"
              :label="{
                show: true,
                position: 'right',
                valueAnimation: true,
              }"
              :data="barData"
      />
    </charts>
<!--    <charts-->
<!--            width="500px"-->
<!--            height="500px"-->
<!--            :loading="loading"-->
<!--    >-->
<!--      <charts-yAxis-->
<!--              type="value"-->
<!--      />-->
<!--      <charts-xAxis-->
<!--              type="category"-->
<!--              :boundaryGap="false"-->
<!--              :data="xAxis"-->
<!--      />-->

<!--      <charts-series-->
<!--              v-for="item in nameMap"-->
<!--              :key="item"-->
<!--              :name="item"-->
<!--              type="line"-->
<!--              :data="nameDataMap[item]"-->
<!--      />-->
<!--    </charts>-->
<!--    <charts-->
<!--            width="500px"-->
<!--            height="500px"-->
<!--            :loading="loading"-->
<!--    >-->
<!--      <charts-yAxis-->
<!--              type="value"-->
<!--      />-->
<!--      <charts-xAxis-->
<!--              type="category"-->
<!--              :boundaryGap="false"-->
<!--              :data="xAxis"-->
<!--      />-->

<!--      <charts-series-->
<!--              v-for="item in nameMap"-->
<!--              :key="item"-->
<!--              :name="item"-->
<!--              type="bar"-->
<!--              :data="nameDataMap[item]"-->
<!--      />-->
<!--    </charts>-->
  </div>
</template>

<script>
import BarDemo1 from './components/bar/demo1'
export default {
  name: "App",
  components: {
    BarDemo1
  },
  data() {
    return {
      aMap: null,
      loading: true,
      xAxis: [],
      barData: [],
      chartsData: [5, 20, 36, 10, 10, 20],
      chartsData1: [5, 20, 36, 10, 10, 20],
      pieData: [
        { value: 1048, name: "搜索引擎" },
        { value: 735, name: "直接访问" },
        { value: 580, name: "邮件营销" },
        { value: 484, name: "联盟广告" },
        { value: 300, name: "视频广告" },
      ],
      nameMap: ['a', 'b'],
      nameDataMap: {
        'a': [],
        'b': [],
      }
    };
  },
  async mounted() {
    for (let i = 0; i < 5; ++i) {
      this.barData.push(Math.round(Math.random() * 200));
    }
    const run = () => {
      for (let i = 0; i < this.barData.length; ++i) {
        if (Math.random() > 0.9) {
          this.$set(
                  this.barData,
                  i,
                  Math.round(Math.random() * 2000)
          )
          // this.barData[i] += Math.round(Math.random() * 2000);
        } else {
          this.$set(
                  this.barData,
                  i,
                  Math.round(Math.random() * 200)
          )
          // this.barData[i] += Math.round(Math.random() * 200);
        }
      }
      // console.log('that.barData', this.barData)
    }
    setTimeout(function () {
      run();
    }, 0);
    setInterval(function () {
      run();
    }, 3000);
    setTimeout(() => {
      this.nameMap.forEach(item => {
        const arr = []
        for (let i = 0; i < 7; i++) {
          arr.push(Math.ceil(Math.random() * 100000))
        }
        this.nameDataMap[item] = arr
        console.log('this.nameDataMap[item] ', this.nameDataMap[item] )
      })
      this.loading = false;
      const data = [];
      const data1 = [];
      for (let i = 0; i < 10; i++) {
        data.push(this.createRandom());
        data1.push(this.createRandom());
      }
      this.chartsData = data;
      this.chartsData1 = data1;
      this.xAxis = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }, 500);
  },
  methods: {
    createRandom() {
      return Math.ceil(Math.random() * 10000);
    },
    getEchart (charts) {
      console.log('charts', charts)
    }
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
